/**
 * 学习目标：react - setState的原理
 * 1. setState 是异步更新的 - 跟vue相似
 * 2. setState 是合并执行的,提升性能 - 不是每一次都直接执行,直接执行会影响性能
 */
import React from 'react';
export default class App extends React.Component {
  state = { count: 0 };
  handleClick = () => {
    // sst
    // 多次调用不会直接全部执行，而是会合并
    this.setState({ count: this.state.count + 1 });
    this.setState({ count: this.state.count + 2 });
    this.setState({ count: this.state.count + 3 });
    // {
    //   count: 1,
    //   count: 2,
    //   count: 3
    // }
    // 后面属性覆盖前面的，所以最终是3
  };
  componentDidUpdate() {
    console.log('componentDidUpdate -----> ', this.state.count);
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>点我+1</button>
        count - {this.state.count}
      </div>
    );
  }
}
